<template>
    <div>
        <p>{{ flag }}</p>
        <ul>
            <li v-for="(item, i) in listArr" :key="item + i" @click="handleClick">
                {{ item + (i + 1) }}
            </li>
        </ul>
        <!-- <button @click="flag = false">pushItem</button> -->
        <button @click="listArr.push('----------')">pushItem</button>
    </div>
</template>

<script>
export default {
    props: {},
    data() {
        return {
            flag: true,
            listArr: ['大伟聊前端', '大伟聊前端', '大伟聊前端', '大伟聊前端']
        };
    },
    methods: {
        handleClick(params) {
            debugger;
            console.log('触发绑定事件' + params);
        },
        handler(e) {
            console.log(e.target);
        }
    }
};
</script>

<style scoped>
/* 内容区的样式 */
.content {
    background-color: #fff;
    width: 500px;
}
.content div {
    width: 100%;
    height: 600px;
    font-size: 36px;
    padding: 20px;
    background-color: rgb(22, 93, 255);
}
.content div:nth-child(2n) {
    background-color: #847ec3;
}
/* 导航栏的样式 */
.navs {
    position: fixed;
    top: 80px;
    left: 700px;
    background-color: #efefef;
}
.navs li {
    padding: 0 20px;
    line-height: 1.6;
    font-size: 24px;
}
/* 当导航被点亮后改变颜色 */
.navs .active {
    color: #fff;
    background-color: rgb(22, 93, 255);
}
</style>
